<template>
  <view>
    <el-cascader v-model="depts" :options="deptTreeData" :props="deptProps" style="width: 100%" :disabled="disabled"
              :show-all-levels="true" placeholder="请选择机构" @change="deptTreeChange" filterable clearable />
  </view>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {Dept} from "@/apis/model/system/DeptModel";
import {deptLoop} from "@/apis/http/system/DeptHttp";
import { Permit } from '@/apis/model/system/PermitModel';

interface Prop {
  depts: Array<Array<Number>>,
  deptProps: {},
  disabled: {
    type:boolean,
    default: false
  }
}

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["retCascaderData"]);

const deptTreeData: any = ref<Array<Dept>>([])

/**
 * 获取数据
 * @param value json类型的数据
 */
const deptTreeChange = (depts: Array<Array<Number>>) => {
  emit("retCascaderData", depts)
}


const initDept = async () => {
  await deptLoop().then(res => {
    const code = res.code
    const message = res.message
    const data = res.data as Array<Permit>
    if (code == 200) {
      deptTreeData.value = data;
    }
  });
}

onMounted(() => {
  initDept();
})

</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
